<template>
	<view>
		<!-- 设置标题弹窗 -->
		<u-popup v-model="showPop1" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle"
			@close="close" :mask-close-able="false">
			<!-- <view class="popup"> -->
			<view class="flex-col flex-1 popup1 ml-7-5" :style="{backgroundImage: 'url(' + commonData.showIntegalPopData.byaudioPopBg +')'}" v-if="showPop1">
				<text class="self-center title1">生成视频</text>
				<view class="flex-col items-center mt-16-5">
					<view class="content">
						<view v-if="modeType=='标清'" class="pop-card-num flex-row justify-start items-center">
							预计生成时间：{{integal<10 ? '1分钟' : formatMin(integal*6)}}
							<!-- 预计生成时间：{{formatMin(integal<10? '1分钟' : integal*6)}} -->
						</view>
						<view v-if="modeType=='高清(上传慢)'" class="pop-card-num flex-row justify-start items-center">
							预计生成时间：{{ integal<10 ? '5分钟' : formatMin(integal*30)}}
						</view>
						<view class="pop-card-num flex-row justify-start items-center mt-27">
							消耗积分：{{integal}}
						</view>
					</view>
					<view class="flex-row bottom-btn justify-between">
						<view @click="cancel" class="flex-col justify-start items-center agree-btn1">
							<text class="font-noagree">取消</text>
						</view>
						<!-- <view v-if="!isLoading" @click="submit" class="flex-col justify-start items-center noagree-btn1">
							<text class="font-agree">确定</text>
						</view>
						<view v-if="isLoading" class="flex-col justify-start items-center noagree-btn1">
							<text class="font-agree">确定</text>
						</view> -->
						<view @click="submit" class="flex-col justify-start items-center noagree-btn1">
							<text class="font-agree">确定</text>
						</view>
					</view>
					<view class="num mt-10 flex-row items-center">
						<image v-if="!checked" @click="changAgree" class="image_check"
							src="https://terminator.axu9.com/images/uncheck.png" />
						<image v-else @click="changAgree" class="image_check"
							:src="commonData.createData.checked" />
						<text class="agreement-text1">同意将作品用作案例展示</text>
						<text @click="toAgreement" class="agreement-text2">《{{detailAgreeTitle}}》</text>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</u-popup>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		getAgreement
	} from "@/api/video.js"
	export default {
		props: {
			integal: {
				type: Number,
				default: 0
			},
			// isLoading: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		// filters: {
		// 	formatMin(second){
		// 		let miao = second;
		// 		if(miao < 10){
		// 			console.log(miao,'miao')
		// 		}
		// 		let min = miao < 10 ? 1 : Math.round(miao / 60);
		// 		return min+'分钟'
		// 	}
		// },
		created() {
			this.commonData = commonData;
		},
		data() {
			return {
				modeType: '',//上传视频模式 标清 高清(上传慢)
				showPop1: false, //设置标题弹窗
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				detailAgreeTitle: '详情',
				checked: uni.getStorageSync("isDetailAgree") ? uni.getStorageSync("isDetailAgree") : true,
				commonData: {}
			}
		},
		onReady() {
			console.log('onReady')
		},
		mounted() {
			
			this.modeType = uni.getStorageSync("videoMode") ? uni.getStorageSync("videoMode") : '标清'
			this.getXieyi();
		},
		methods: {
			// 跳转到协议
			toAgreement() {
				uni.navigateTo({
					url: '/pagesMine/agreement/index?type=5'
				})
			},
			changAgree() {
				this.checked = !this.checked;
				uni.setStorageSync("isDetailAgree",this.checked ? 1 : 0)
			},
			// 详情
			getXieyi() {
				getAgreement({
					id: 5
				}).then(res => {
					if (res.errno == 0) {
						this.detailAgreeTitle = res.data.title;
					}
				})
			},
			formatMin(second){
				let miao = second;
				if(miao < 10){
					console.log(miao,'miao')
				}
				let min = miao < 10 ? 1 : Math.round(miao / 60);
				return min+'分钟'
			},
			open() {
				this.showPop1 = true;
			},
			close() {
				this.showPop1 = false;
				
			},
			cancel(){
				this.showPop1 = false;
				this.$emit('cancel')
			},
			// cancel(){
			// 	this.showPop1 = false;
			// },
			handleInput(e) {
				console.log(e.detail.value, '哈哈哈')
				this.audioTitle1 = e.detail.value;
			},
			submit() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
</style>
<style lang="scss" scoped>
	

	/* 弹窗 */
	

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		height: 100rpx;
	}

	.opt-list-item {
		background-color: #282c33;
		border-radius: 24rpx;
		height: 143rpx;
		border: 1rpx solid #4d4f53;
		width: 690rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.opt-list-item:first-child .lf-img {
		width: 32rpx;
		height: 45rpx;
	}

	.opt-list-item:last-child .lf-img {
		width: 36rpx;
		height: 31rpx;
	}

	.lf-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 20rpx;
	}

	.lf-img {
		width: 35rpx;
		height: 30rpx;
	}

	.rg-img {
		width: 11rpx;
		height: 20rpx;
	}

	.popup1 {
		// margin-right: 40rpx;
		padding: 59rpx 28rpx 30rpx;
		border-radius: 32rpx;
		// background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 615rpx;
		// height: 616rpx;
	}

	.title1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.content {
		padding: 41rpx 0;
		border-radius: 16rpx;
		width: 60%;
		/* border: 1rpx solid #ffffff; */
		color: #fff;
		margin-top: 35rpx;
	}
	.mt-27 {
		margin-top: 27rpx;
	}

	.input-class1 {
		margin-left: 30rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}

	.input-placeholder1 {
		/* margin-left: 30rpx; */
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}

	.content1 {
		margin-left: 6rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 54rpx;
		text-align: center;
		height: 270rpx;
		overflow-y: scroll;
	}

	.bottom {
		margin-top: 26rpx;
	}

	.text_agree {
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
	}

	.bottom-btn {
		margin-top: 35rpx;
		width: 546rpx;
	}

	.agree-btn1 {
		padding: 34rpx 0;
		/* flex: 1 1 257rpx; */
		width: 257rpx;
		border-radius: 16rpx;
		height: 100rpx;
		border: 2rpx solid $theme-color;
	}

	.font-noagree {
		color: $theme-color;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.noagree-btn1 {
		margin-right: 5rpx;
		padding: 34rpx 0;
		/* flex: 1 1 257rpx; */
		width: 257rpx;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 16rpx;
		height: 100rpx;
	}
	.image_check {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.num {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
		margin-bottom: 20rpx;
	}
	
	.num-green {
		color: $theme-color;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 30rpx;
		margin: 0 6rpx;
	}
	.mt-10 {
		margin-top: 20rpx;
	}
	.agreement-text1 {
		color: #999999;
		font-weight: 400;
		font-face: PingFang SC;
		font-size: 24rpx;
	}
	
	.agreement-text2 {
		color: $theme-color;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 24rpx;
	}
</style>